<template>
  <div class="knowledge">
    <template v-if="!showContent">
      <div class="top_bg"></div>
      <div class="main">
        <SearchCom @searchEvent="searchEvent" />
        <div>
          <p class="ml">目录</p>
          <vxe-tree :data="planList" ref="treeRef">
            <template #content="{ nodeData }">
              <div class="content">
                <p class="know_title" @click="handleDetail(nodeData.id)">
                  {{ nodeData.name || '-' }}
                </p>
                <div class="btns" v-show="operate">
                  <van-icon name="edit" color="#1989fa" @click="changeName(nodeData)" />
                  <!-- <van-icon name="plus" color="#1989fa" @click="handleAdd(nodeData)" /> -->
                  <van-icon
                    name="plus"
                    color="#1989fa"
                    @click="handleDetail(nodeData.id, true)"
                  />
                </div>
              </div>
            </template>
          </vxe-tree>
        </div>
        <van-button class="add" icon="plus" type="primary" @click="operate = !operate" />
      </div>
    </template>
    <KnowContent
      v-else
      :content="content"
      :isEdit="isEdit"
      @handleback="handleback"
      @handleSave="handleSave"
    />

    <van-overlay :show="showOverlay" class-name="loading_overlay">
      <van-loading class="loading" type="spinner" color="#1989fa" />
    </van-overlay>

    <van-dialog
      v-model:show="show"
      title="编辑"
      show-cancel-button
      @confirm="handleConfirm(1)"
      @cancel="handleCancel(1)"
    >
      <van-field v-model="name" placeholder="请输入" />
    </van-dialog>
    <van-dialog
      v-model:show="showForm"
      title="新增"
      show-cancel-button
      @confirm="handleConfirm(2)"
      @cancel="handleCancel(2)"
    >
      <van-cell-group inset>
        <van-field
          v-model="form.name"
          placeholder="请输入"
          :rules="[{ required: true, message: '请输入' }]"
        />
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import {
  getKnowledgeBaseList,
  addKnowledgeBase,
  updateKnowledgeBase,
  deleteKnowledgeBaseById,
  getDoctKnowledgeBase,
  saveDocKnowledgeBase,
} from '@/api/knowledgeBase.js';
import KnowContent from './knowContent.vue';
import { showNotify, closeNotify } from 'vant';
const name = ref('');
const showContent = ref(false);
const content = ref({});
const showOverlay = ref(false);
const isEdit = ref(false);
const show = ref(false);
const showForm = ref(false);
const planList = ref([]);
const treeRef = ref(null);
const operate = ref(false);
const selectedNode = ref();
const form = reactive({
  parentId: 0,
  name: '',
});
onMounted(() => {
  getList();
});

function searchEvent(val) {
  console.log('searchEvent', val);
}

function getList() {
  showOverlay.value = true;
  getKnowledgeBaseList()
    .then((res) => {
      if (res.code == 200) {
        planList.value = res.data || [];
        setTimeout(() => {
          treeRef.value.treeFactory.expandAllNodes();
        }, 50);
      }
    })
    .catch((err) => {
      console.log('err', err);
    })
    .finally(() => {
      showOverlay.value = false;
    });
}

const handleDetail = (id, edit) => {
  if (!id) {
    return showNotify({ type: 'danger', message: '知识数据异常' });
  }
  isEdit.value = edit;
  showOverlay.value = true;
  getDoctKnowledgeBase(id)
    .then((res) => {
      if (res.code == 200) {
        showContent.value = true;
        content.value = res.data;
      }
    })
    .catch((err) => {
      console.log('err', err);
    })
    .finally(() => {
      showOverlay.value = false;
    });
};

const handleAdd = (item) => {
  form.parentId = item.id;
  showForm.value = true;
};
const changeName = (item) => {
  selectedNode.value = item;
  name.value = item.name || '';
  show.value = true;
};

function handleback() {
  showContent.value = false;
  setTimeout(() => {
    treeRef.value.treeFactory.expandAllNodes();
  }, 50);
}

function handleSave(data) {
  showOverlay.value = true;
  saveDocKnowledgeBase(data)
    .then((res) => {
      if (res.code == 200) {
        showNotify({ type: 'success', message: '新增成功' });
        getList();
        showContent.value = false;
      }
    })
    .catch((err) => {
      showNotify({ type: 'danger', message: '新增失败' });
    })
    .finally(() => {
      showOverlay.value = false;
    });
}

function addKnowledge() {
  showOverlay.value = true;

  addKnowledgeBase(form)
    .then((res) => {
      if (res.code == 200) {
        showNotify({ type: 'success', message: '新增成功' });
        getList();
        form.name = '';
        form.parentId = 0;
      }
    })
    .catch((err) => {
      showNotify({ type: 'danger', message: '新增失败' });
      console.log('err', err);
    })
    .finally(() => {
      showOverlay.value = false;
    });
}
const handleConfirm = (type) => {
  if (type == 1) {
    showOverlay.value = true;
    updateKnowledgeBase({
      id: selectedNode.value.id,
      name: name.value,
    })
      .then((res) => {
        if (res.code == 200) {
          showNotify({ type: 'success', message: '标题修改成功' });
          getList();
          selectedNode.value = null;
        }
      })
      .catch((err) => {
        showNotify({ type: 'danger', message: '标题修改失败' });
        console.log('err', err);
      })
      .finally(() => {
        showOverlay.value = false;
      });
  } else {
    addKnowledge();
  }
};
const handleCancel = () => {
  show.value = false;
  showForm.value = false;
  form.name = '';
  form.parentId = 0;
};
</script>

<style scoped lang="scss">
.knowledge {
  .top_bg {
    width: 100%;
    margin-top: 25px;
    background: url('@/assets/images/zskBg.png') no-repeat;
    background-size: 100% 100%;
    height: 160px;
  }
  .main {
    padding: 10px 12px;
    .ml {
      height: 24px;
      font-weight: bold;
      font-size: 15px;
      color: #333333;
      margin: 12px 0;
    }
    .content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .know_title {
        display: inline-block;
        width: 65%;
      }
      .btns {
        width: 66px;
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 0 12px;
      }
    }

    .add {
      position: absolute;
      bottom: 60px;
      right: 20px;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      background: linear-gradient(180deg, #6fc3ff 0%, #28a5ff 100%) !important;
      border: none;
    }

    ::v-deep .vxe-tree__node-content--value-wrapper {
      width: 100%;
    }
  }
}
</style>
